app/components/Link/Base.vue (1)

117-125: Consider reserving shortcut badge space to reduce hydration shift.

<ClientOnly> removes the <kbd> during SSR and inserts it on hydration, which can nudge neighbouring header controls. A fixed-size placeholder when ariaKeyshortcuts exists would keep layout stable.

app/components/Button/Base.vue (1)

30-30: Consider extracting the composable call to the top level of setup.

Invoking useKeyboardShortcuts() inside a computed getter is unconventional. Composables are typically called at the top level of <script setup> to ensure proper reactive context and lifecycle handling.

The current implementation works because import.meta.client guards the call on the server, but for clarity and adherence to Vue conventions, consider:

♻️ Suggested refactor

+const keyboardShortcuts = import.meta.client ? useKeyboardShortcuts() : shallowRef(false)
+const keyboardShortcutsEnabled = computed(() => keyboardShortcuts.value)
-const keyboardShortcutsEnabled = computed(() => import.meta.client && useKeyboardShortcuts().value)

test/e2e/interactions.spec.ts (1)

264-273: Consider adding a test for the 'c' shortcut when disabled.

For completeness, you might want to add a test verifying that the 'c' shortcut (compare) also does not navigate when shortcuts are disabled. This would mirror the enabled test at lines 155-165.

🧪 Optional test to add

test('"c" (package) does not navigate to compare when shortcuts are disabled', async ({
  page,
  goto,
}) => {
  await goto('/package/vue', { waitUntil: 'hydration' })

  await page.keyboard.press('c')

  await expect(page).toHaveURL(/\/package\/vue$/)
})

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

app/components/Link/Base.vue (1)

118-126: Consider reserving space for the client-only <kbd> hint to reduce layout shift.

Because the key hint only appears after hydration, link/button content can shift horizontally. A small fallback placeholder in ClientOnly would minimise CLS in headers and dense layouts.

♻️ Suggested tweak

-    <ClientOnly>
+    <ClientOnly>
       <kbd
         v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
         class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
         aria-hidden="true"
       >
         {{ ariaKeyshortcuts }}
       </kbd>
+      <template `#fallback`>
+        <span
+          v-if="ariaKeyshortcuts"
+          class="ms-2 inline-block size-4"
+          aria-hidden="true"
+        />
+      </template>
     </ClientOnly>

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro